<style lang="less">
</style>
<template>
  <div>
    <Select v-model="typeValue" style="width:200px;margin: 20px 0px 20px 20px" @on-change="change">
      <Option v-for="item in typeOptions" :value="item" :key="item">{{ item }}</Option>
    </Select>
    <chart :chart-data="tableData" style="margin-left: 20px;margin-right: 20px" :type="typeValue" height="500px" width="100%"/>
  </div>
</template>
<script>
import { getRechargeHistory } from '@/api/rechargeLog'
import Chart from '@/components/cc/mixChart'

export default {
  components: {
    Chart
  },
  data () {
    return {
      typeValue: '日',
      typeOptions: ['日', '周', '月', '年'],
      tableData: [],
      currentRemainIntegral: 0,
      columns: [{
        type: 'index',
        width: 60,
        align: 'center'
      }, {
        title: '活动名称',
        key: 'name'
      }, {
        title: '需要积分',
        key: 'integral'
      }, {
        title: 'Action',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.btnAddClick(params)
                }
              }
            }, '参加')
          ])
        }
      }],
      columns1: [{
        type: 'index',
        width: 60,
        align: 'center'
      }, {
        title: '活动名称',
        key: 'activityname'
      }, {
        title: '花费积分',
        key: 'integral'
      }, {
        title: '报名时间',
        key: 'create_time'
      }]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    change () {
      this.getList()
    },
    getList () {
      getRechargeHistory({type: this.typeValue}).then(({data}) => {
        console.log(data)
        this.tableData = data
      })
    }
  }
}

</script>
<style>
</style>
